<template>
	<CommonTitle titleName="周报内容详情">
		<template #rightCnBox>
			<div class="d-flex topn">
				<div class="report-name">
					<span>{{ state.departmentWeeklyName }}</span>
				</div>
				<div class="right-content d-flex">
					<div class="time m-r10">
						<span> 时间：{{ state.startTime }} 至 {{ state.endTime }} </span>
					</div>
					<div class="titleRight">
						<el-button @click="addHandel()" class="button_edit">
							<svg-icon icon-class="add-icon-1" class="m-r5" />增加一行
						</el-button>
						<el-button
							@click="
								onExport({
									departmentWeeklyId: getURLhandler(Route.path)
										.departmentWeeklyId,
								})
							"
              class="button_edit"
							>周报导出</el-button
						>
					</div>
				</div>
			</div>
		</template>
	</CommonTitle>
	<div class="box">
		<el-form
			:inline="true"
			label-width="100"
			:model="state"
			class="demo-form-inline"
		>
			<div class="content">
				<!-- <div class="item m-b20" v-for="(v, i) in state.list" :key="i">
					<div class="title m-b20">
						<el-row>
							<el-col :span="4">
								<div>人员</div>
							</el-col>
							<el-col :span="4">
								<div>项目</div>
							</el-col>
							<el-col :span="4">
								<div>工作中存在的卡点及问题</div>
							</el-col>
							<el-col :span="4">
								<div>亟需公司支撑协调事项</div>
							</el-col>
							<el-col :span="4">
								<div v-if="i === 0">
									<el-button @click="addHandel()"
										><svg-icon icon-class="add-icon" />添加一行</el-button
									>
								</div>
							</el-col>
						</el-row>
					</div>
					<el-row v-if="!v.flag">
						<el-col :span="4">
							<div class="itemc">{{ v.userName }}</div>
						</el-col>
						<el-col :span="4">
							<div class="itemc">{{ v.projectName }}</div>
						</el-col>
						<el-col :span="4">
							<div class="itemc">{{ v.problemDescription }}</div>
						</el-col>
						<el-col :span="4">
							<div class="itemc">{{ v.requireDescription }}</div>
						</el-col>
						<el-col :span="4">
							<div>
								<el-button @click="editHandel(v)">编辑</el-button>
							</div>
						</el-col>
					</el-row>
				</div> -->
				<el-table :data="state.list" :max-height="500">
					<el-table-column property="id" label="序号" align="center" />
					<el-table-column
						property="userName"
						label="员工姓名"
            min-width="80"
						align="center"
					/>
					<el-table-column
						property="projectName"
						label="项目名称"
            min-width="80"
						align="center"
					/>
					<el-table-column
						property="problemDescription"
						label="工作中存在的卡点问题"
            min-width="150"
						align="center"
					/>
					<el-table-column
						property="requireDescription"
						label="亟需支撑协调事项"
            min-width="150"
						align="center"
					/>
					<el-table-column label="操作" align="center" fixed="right">
						<template #default="scope">
							<el-button @click="editHandel(scope.row)" class="button_edit">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-form>

		<addAndEditDialog
			ref="addDialog"
			@refreshList="getWeekReportHandler"
		/>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import CommonTitle from "@/components/CommonTitle.vue";
import { ElRow, ElCol, ElSelect, ElTable } from "element-plus";
import { weeklyApi, department } from "@/api/project";
import { useRoute } from "vue-router";
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";
import { deriveHandelFnc } from "@/hooks/downCommon";

import AddAndEditDialog from "./addDialog.vue";
const state = reactive({
	user: "",
	departmentWeeklyName: "",
	startTime: "",
	endTime: "",
	departmentOptions: [],
	userOptions: [],
	list: [],
});
let Route = useRoute();
const exportConfig = reactive({
	fileName: "周报填写",
	apiPath: "departmentExport",
	form: {},
});
//导出
const { onExport } = deriveHandelFnc(exportConfig);

const handel = () => {};

const subimitHandel = (item) => {
	// state.list.push(item);
};

const editHandel = (item) => {
	// console.log(item);
	addDialog.value.state.centerDialogVisible = true;
	addDialog.value.state.projectRow = item;
	addDialog.value.state.type = 1;
	addDialog.value.state.departmentWeeklyId = getURLhandler(
		Route.path
	).departmentWeeklyId;
};

//周报填写详情记录数据
const getWeekReportHandler = async () => {
	await weeklyApi
		.getWeeklyWrite(getURLhandler(Route.path).departmentWeeklyId || "")
		.then((res) => {
			if (res.code == "200") {
				if (res?.data) {
					let arr = res.data.weeklyVos.map((item, index) => {
						return {
							id: index + 1,
							...item,
						};
					});
					state.list = arr;
					state.departmentWeeklyName = res.data.departmentWeeklyName;
					state.startTime = res.data.startTime;
					state.endTime = res.data.endTime;
				}
			}
		});
};
const addDialog = ref(null);
const addHandel = () => {
	addDialog.value.state.centerDialogVisible = true;
	addDialog.value.state.type = 0;
	addDialog.value.state.departmentWeeklyId = getURLhandler(
		Route.path
	).departmentWeeklyId;
};

onMounted(() => {
	getWeekReportHandler();
});
</script>
<style lang="scss" scoped>
.box {
	border-radius: 10px;
	border: 1px solid #e3e7f1;
	padding: 34px 90px;

	.isItemHover {
		min-height: 60px;
	}

	.itemc {
		width: 90%;
		min-height: 40px;
		background-color: #f7f7fa;
		padding: 13px 22px;
	}
}

.time {
	width: 220px;
	height: 14px;
	font-size: 14px;
	font-family: SourceHanSansCN-Normal, SourceHanSansCN;
	font-weight: 400;
	color: #333333;
	line-height: 21px;
}
.topn {
	flex: 1;
	align-items: center;
	.report-name {
		flex: 4;
		text-align: center;
		span {
			font-weight: bold;
			color: #1a1a1a;
			font-size: 20px;
		}
	}
	.right-content {
		flex: 2;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
